<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head</title>
    <link rel="stylesheet" type="text/css" href="../static/assets/css/css/index.css"/>
    <style type="text/css">
        .banner{width: 100%;height: 400px;background: url(../static/assets/img/r.jpg) no-repeat 100% 100%;background-size: 100% 100%;}
        .font{width: 90%;text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .font h1{word-spacing: 20px;letter-spacing: 10px;font-size: 50px;}
        .fontP{text-align: center;color: #fff;line-height: 60px;font-size: 20px;padding-top: 20px;}
        .forms{width: 90%;margin: 0 auto;}
        .form{background-color: #D6CCC5;text-align: center;display: flex;justify-content: space-around;align-items: center;height: 60px;width: 30%;padding: 0 20px;margin: 30px auto;}
        .form input{border-radius: 5px;display: block;height: 30px;width: 350px;border: none;padding-left: 10px;font-weight: bold;}
        .form button{width: 100px;height: 30px;border-radius: 5px;border: none;background: url(../static/assets/img/button.png) no-repeat 10px 6px;background-size: 15px 15px;background-color: #F19323;font-weight: bold;}
        /* banner完 */
        .main{width: 100%;height: 400px;background: url(../static/assets/img/banner2.jpg) no-repeat 100% 100%;background-size: 100%;}
        .main p{font-size:40px ;font-weight: bold;color: #fff;line-height: 60px;width: 90%;margin: 0 auto;padding-top: 100px;text-align: center;word-spacing: 15px;letter-spacing: 5px;}
        /* main完 */
        @media screen and (max-width:940px) {
            .form{flex-wrap: wrap;padding: 20px 20px;margin: 0px auto;}
            .fontP{font-size: 15px;padding-top: 0px;}
        }
        @media screen and (max-width:800px){
            .form{width: 40%;padding: 20px 20px;margin: 0px auto;}
            .font{line-height: 50px;padding-top: 10px;}
            .fontP{font-size: 15px;padding-top: 0px;}
        }
        @media screen and (max-width:650px){
            .form{width: 40%;padding: 20px 40px;margin: 5px auto;}
            .font{line-height: 40px;padding-top: 10px;}
            .font h1{word-spacing: 10px;letter-spacing: 10px;font-size: 40px;}
            .fontP{font-size: 15px;padding-top: 0px;}
        }
    </style>
</head>
<body>
<header>
    <div class="header center">
        <div class="one">
            <img src="../static/assets/img/f.png">
            <img src="../static/assets/img/n.png">
            <img src="../static/assets/img/g.png">
            <img src="../static/assets/img/q.png">
            <img src="../static/assets/img/x.png">
        </div>
        <div class="two">
            <div class="two1"><img src="../static/assets/img/xin.png"><span>ContacUst@Gmail.com</span></div>
            <div class="two2"><img src="../static/assets/img/phone.png"><span>80888887</span></div>
        </div>
    </div>
</header>
<div class="navs">
    <div class="center">
        <img src="../static/assets/img/logo2.png">
        <nav>
            <div class="nav">
                <ul>
                    <li><a href="index.html" class="current">HOMRE</a></li>
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div><!--navs-->
<div class="banner">
    <div class="font">
        <h1>SEE THE WORD DIFFERENTLY</h1>
        <p>Request,design and book travel experiences as unique as you are</p>
    </div>
    <div class="forms">
        <div class="form">
            <input type="text" v-model="name" placeholder="Where are you going?"/>
            <button>Search</button>
        </div>
    </div>
    <div class="fontP"><p>TOP DESTINATION :PARISNEW YORKLONDONROMESAN FRANCISCOMORE...</p></div>
</div><!--banner-->

</body>
</html>
